<template>
  <!--5 st商品列表 -->
  <div class="breadcrumb">
    <Breadcrumb :aaa="aaa" :msgg="msg" :txt="txt" :path1="path1" />
  </div>

  <div class="con_container">
    <div class="search">
      <div class="search_top">
        <span> 筛选搜索</span>
        <span>
          <el-button>重置</el-button>
          <el-button type="primary" @click="onSearch">查询搜索</el-button>
        </span>
      </div>
      <div class="ipt_box">
        <div class="left_ipt">
          <el-form label-width="100px">
            <el-form-item label="输入搜索">
              <el-input
                type="text"
                placeholder="商品名称"
                v-model="nickname"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form label-width="100px">
            <el-form-item label="商品分类">
              <el-cascader
                :options="options1"
                :show-all-levels="false"
                clearable
              />
            </el-form-item>
          </el-form>
          <el-form label-width="100px">
            <el-form-item label="上架状态">
              <el-cascader
                :options="options2"
                :show-all-levels="false"
                clearable
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="right_ipt">
          <el-form label-width="100px">
            <el-form-item label="商品货号">
              <el-input
                type="text"
                placeholder="商品货号"
                v-model="shopnum"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form label-width="100px">
            <el-form-item label="商品品牌">
              <el-cascader
                :options="options3.name"
                :show-all-levels="false"
                clearable
              />
            </el-form-item>
          </el-form>
          <el-form label-width="100px">
            <el-form-item label="审核状态">
              <el-cascader
                :options="options4"
                :show-all-levels="false"
                clearable
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="add_box">
      <span>数据列表</span>
      <el-button @click="addData">添加</el-button>
    </div>
    <!-- 列表数据 -->
    <div class="table_list">
      <el-table :data="tableData.list" style="width: 100%" :border="true">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="id" label="编号" width="100" />
        <el-table-column prop="username" label="商品图片" width="200">
          <template #default="scope">
            <img :src="scope.row.pic" alt="" />
            diaomao
          </template>
        </el-table-column>
        <el-table-column label="  " width="150">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
            <br />
            <span>品牌：{{ scope.row.brandName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="价格/货号" width="150">
          <template #default="scope">
            <span>价格：{{ scope.row.originalPrice }} ￥</span>
            <br />
            <span>货号：{{ scope.row.productSn }}</span>
          </template>
        </el-table-column>
        <!-- 自定义列模板 -->
        <el-table-column label="标签" width="180">
          <template #default="scope" key="scope.row.id">
            <span
              >上架：<el-switch
                :model-value="scope.row.publishStatus === 0 ? false : true"
                @change="changeSwitch1(scope.row.id, scope.row.publishStatus)"
            /></span>
            <br />
            <span
              >新品：<el-switch
                :model-value="scope.row.recommandStatus === 0 ? false : true"
                @change="
                  changeSwitch3(scope.row.id, scope.row.recommandStatus)
                "
            /></span>
            <br />
            <span
              >推荐：<el-switch
                :model-value="scope.row.newStatus === 0 ? false : true"
                @change="changeSwitch2(scope.row.id, scope.row.newStatus)"
            /></span>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="80" />
        <el-table-column prop="stock" label="SKU库存" width="100">
          <template #default="scope">
            <div class="icon_pen" @click="changevisiableFn">
              <el-icon>
                <EditPen />
              </el-icon>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sale" label="销量" width="80" />
        <el-table-column label="审核状态" flex="right">
          <template #default="scope">
            <span>{{
              scope.row.verifyStatus === 0 ? "未审核" : "审核通过"
            }}</span>
            <br />
            <el-button type="primary" plain>审核详情</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" flex="right">
          <template #default="scope">
            <el-button @click="addproduct(scope.row.id)">编辑</el-button>
            <br />
            <el-button type="danger" @click="delListData1(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="foot_box">
      <div style="display: flex; justify-content: space-between">
        <el-form label-width="100px">
          <el-cascader :options="dataList" :show-all-levels="false" clearable />
        </el-form>
        <el-button style="margin-left: 10px" type="primary">确认</el-button>
      </div>
      <el-pagination
        v-model:current-page="tableData.pageNum"
        v-model:page-size="tableData.pageSize"
        background
        :page-sizes="[1, 5, 10, 15]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 提示对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title=""
      width="30%"
      :before-close="handleClose"
    >
      <span>确定要删除吗？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="delListData2">确定</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- SKU库存 -->
    <el-dialog
      v-model="visiable"
      title="编辑货品信息"
      :before-close="closedFn"
      style="width: 500px"
    >
      <el-form :model="form">
        <el-form-item label="商品货号:">
          <el-input
            v-model="input3"
            placeholder="请输入专题名称"
            class="input-with-select"
          >
            <template #append>
              <el-button @click="onSearch" icon="Search" />
            </template>
          </el-input>
        </el-form-item>
        <el-table style="width: 100%">
          <el-table-column prop="date" label="SKU编号" width="100" />
          <el-table-column prop="name" label="dadaowdlad" width="130" />
          <el-table-column prop="address" label="颜色" width="100" />
          <el-table-column prop="address" label="asdasd" width="100" />
          <el-table-column prop="address" label="123123123" width="100" />
          <el-table-column prop="address" label="1111" width="100" />
          <el-table-column prop="address" label="销售价格" width="100" />
          <el-table-column prop="address" label="商品库存" width="100" />
          <el-table-column prop="address" label="库存预警值" width="100" />
        </el-table>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <div class="btn">
            <el-button @click="visiable = false">取消</el-button>
            <el-button type="primary" @click="onConfirm"> 确定 </el-button>
          </div>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "../../request/api";
import { ElMessageBox } from "element-plus";
import EditPen from "element-plus";
import Breadcrumb from "../../components/breadcrumb.vue";
let msg = ref("商品列表");
let txt = ref("商品");
let path1 = ref("pms/addProduct");
let aaa = ref(0);

// SKU库存
let visiable = ref(false);
let changevisiableFn = () => {
  visiable.value = true;
};
const closedFn = () => {};
let onConfirm = () => {
  visiable.value = false;
};
// 确认删除框
const dialogVisible = ref(false);
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {});
};
// 添加数据
let addData = () => {
  router.push("/pms/addProduct");
};
// 搜索请求
// 定义搜索数据
let nickname = ref("");
let shopnum = ref();
let onSearch = () => {
  if (nickname.value === "") {
    getProductList();
    console.log("请求所有数据");
    return;
  }
  console.log("请求搜索数据");
  api.product
    .prefrenceArealistAll({
      keyword: nickname.value,
      pageNum: tableData.pageNum,
      pageSize: tableData.pageSize,
    })
    .then((res) => {
      console.log(res);
      tableData.list = res.list;
      tableData.total = res.total;
    });
};
// 列表数据
let tableData = reactive({
  list: <any>[],
  pageNum: 1,
  pageSize: 5,
  total: 28,
  totalPage: 6,
  nickName: "",
});
// 跳转编辑
let router = useRouter();
let addproduct = (id: number) => {
  console.log(id);
  router.push({ path: `/pms/updateProduct?id=${id}` });
};
// 商品品牌请求数据
let options3 = ref({
  value: "grounding",
  label: "上架",
});
api.product
  .brandListApi({
    pageNum: 1,
    pageSize: 100,
  })
  .then((res) => {
    options3.value.label = res.list.name;
    console.log(options3.value);
  });
// 上架状态
let changeSwitch1 = async (id: number, val: number) => {
  console.log(id, val);
  let data = 0;
  if (val === 0) {
    data = 1;
  } else if (val === 1) {
    data = 0;
  }
  console.log(data);
  let ret = await api.product.publishStatus({
    ids: id,
    publishStatus: data,
  });
  getProductList();
};
// 修改新品状态
let changeSwitch2 = async (id: number, val: number) => {
  console.log(id, val);
  let data = 0;
  if (val === 0) {
    data = 1;
  } else if (val === 1) {
    data = 0;
  }
  console.log(data);
  let ret = api.product.productUpdateNewStatus({
    ids: id,
    newStatus: data,
  });
  getProductList();
};
// 修改推荐状态
let changeSwitch3 = (id: number, val: number) => {
  console.log(id, val);
  let data = 0;
  if (val === 0) {
    data = 1;
  } else if (val === 1) {
    data = 0;
  }
  let ret = api.product.productUpdateRecommendStatus({
    ids: id,
    recommendStatus: data,
  });
  getProductList();
};

// 删除数据
let ids = ref(0);
let delListData1 = (id: number) => {
  console.log(123);
  dialogVisible.value = true;
  ids.value = id;
};
let delListData2 = () => {
  let val = 1;
  api.product.productUpdateDeleteStatus({
    ids: ids.value,
    deleteStatus: val,
  });
  dialogVisible.value = false;
};

// 获取所有商品数据的请求
let getProductList = () => {
  api.product
    .prefrenceArealistAll({
      pageNum: tableData.pageNum,
      pageSize: tableData.pageSize,
      keyword: tableData.nickName,
    })
    .then((res) => {
      console.log(res);
      tableData.list = res.list;
      tableData.total = res.total;
    });
};
getProductList();
// 上架状态
const options2 = [
  {
    value: "grounding",
    label: "上架",
  },
  {
    value: "ungrounding",
    label: "下架",
  },
];
// 审核状态
const options4 = [
  {
    value: "process",
    label: "审核通过",
  },
  {
    value: "unprocess",
    label: "未审核",
  },
];
// 批量操作
const dataList = [
  {
    value: "one",
    label: "商品上架",
  },
  {
    value: "two",
    label: "商品下架",
  },
  {
    value: "three",
    label: "设为推荐",
  },
  {
    value: "four",
    label: "取消推荐",
  },
  {
    value: "five",
    label: "设为新品",
  },
  {
    value: "six",
    label: "取消新品",
  },
  {
    value: "seven",
    label: "转移到分类",
  },
  {
    value: "eight",
    label: "移入回收站",
  },
];

let handleSizeChange = (val: number) => {
  // console.log(val);
  tableData.pageSize = val;
  getProductList();
};
// 改变当前页数
let handleCurrentChange = (val: number) => {
  // console.log(val);
  tableData.pageNum = val;
  getProductList();
};
</script>

<style lang="scss" scoped>
.icon_pen {
  width: 50px;
  height: 50px;
  background-color: skyblue;
}
.search {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  background-color: #fff;

  .search_top {
    display: flex;
    justify-content: space-between;
  }

  .el-input {
    width: 200px;
  }

  .ipt_box {
    display: flex;
    flex-wrap: wrap;
  }
}

.breadcrumb {
  height: 45px;
  border-bottom: 1px solid #ebeef5;
  font-size: 20px;
}

.con_container {
  padding: 10px 20px !important;
  margin-top: 25px !important;
}

.add_box {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 20px;
  height: 20px;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

img {
  height: 100px;
  width: 150px;
}

.table_list {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.el-pagination {
  font-size: 12px;
  float: right;
}

.foot_box {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
//table表格
:deep .el-table .el-table__cell {
  text-align: center !important;
}
:deep .el-table thead {
  font-weight: bold !important;
}
</style>
